<template>
	<div class="tabs-container">
		<el-tabs v-model="activePath" class="tabs" type="card" :closable="tabs.list.length>1" @tab-click="clickTabls" @tab-remove="closeTabs">
			<el-tab-pane 
				v-for="item in tabs.list" :key="item.path" 
				:label="item.title" 
				:name="item.path"
				@click="setTags(item)">
				<template #label>
					<span style="margin-right: 6px;line-height: 6px;">
						<el-icon>
							<component :is="item.icon"></component>
						</el-icon>
					</span>
					{{ item.title }}
				</template>
			</el-tab-pane>
			</el-tabs>
		<!--   右边操作栏    -->
		<div class="Tabs-close-box">
			<el-dropdown @command="handleTags">
				<el-button size="small" link plain>
					<el-icon class="el-icon--right">
						<arrow-down />
					</el-icon>
				</el-button>
				<template #dropdown>
					<el-dropdown-menu size="small">
						<el-dropdown-item command="other">关闭其他</el-dropdown-item>
						<el-dropdown-item command="current">关闭当前</el-dropdown-item>
						<el-dropdown-item command="all">关闭所有</el-dropdown-item>
					</el-dropdown-menu>
				</template>
			</el-dropdown>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { ref, watch } from 'vue';
	import { useTabsStore } from '../store/tabs';
	import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
	const route = useRoute();
	const router = useRouter();
	const activePath = ref(route.fullPath);
	const tabs = useTabsStore();
	// 设置标签
	const setTags = (route: any) => {
		const isExist = tabs.list.some((item) => {
			return item.path === route.fullPath;
		});
		if (!isExist) {
			tabs.setTabsItem({
				name: route.name,
				title: route.meta.title,
				path: route.fullPath,
				icon:route.query.icon
			});
		}
	};
	setTags(route);
	onBeforeRouteUpdate((to) => {
		setTags(to);
	});

	// 关闭全部标签
	const closeAll = () => {
		tabs.clearTabs();
		router.push('/');
	};
	// 关闭其他标签
	const closeOther = () => {
		const curItem = tabs.list.filter((item) => {
			return item.path === route.fullPath;
		});
		tabs.closeTabsOther(curItem);
	};
	const handleTags = (command: string) => {
		switch (command) {
			case 'current':
				// 关闭当前页面的标签页
				tabs.closeCurrentTag({
					$router: router,
					$route: route,
				});
				break;
			case 'all':
				closeAll();
				break;

			case 'other':
				closeOther();
				break;
		}
	};

	// tabs 点击事件处理
	const clickTabls = (item: any) => {
		router.push(item.props.name);
	};

	const closeTabs = (path: string) => {
		if (tabs.list.length > 1) {
			const index = tabs.list.findIndex((item) => item.path === path);
			tabs.delTabsItem(index);
			const item = tabs.list[index] || tabs.list[index - 1];
			router.push(item ? item.path : '/subSystem');
		}
	};

	watch(
		() => route.fullPath,
		(newVal, oldVal) => {
			activePath.value = newVal;
			console.log(newVal);
			console.log(route);
		}
	);

</script>

<style lang="scss">
	.tabs-container {
		position: relative;
		overflow: hidden;
		background-color: var(--el-bg-color);
		padding: 6px 20px 0 10px;
		user-select: none;
		height: 32px;
	}
	.tabs {
		.el-tabs__header {
			margin-bottom: 0;
			border-bottom: none !important;
			.el-tabs__nav{
				border: none !important;
			}
			.el-tabs__item{
				border: none !important;
			}
		}
		.el-tabs__nav {
			height: 32px;
		}
		.el-tabs__item {
			height: 32px;
			color: #afafaf;

		}
		.el-tabs__nav-next,
		.el-tabs__nav-prev {
			line-height: 32px;
		}
		.el-tabs__item.is-active {
			position: relative;
		}
		.el-tabs__item.is-active::before {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 0;
			content: "";
			border-bottom: 2px solid var(--el-color-primary) !important;
		}
	}
	.Tabs-close-box {
		position: absolute;
		right: 0;
		top: 0;
		box-sizing: border-box;
		padding: 4px;
		text-align: center;
		height: 40px;
		background: var(--el-color-info-light-9);
		box-shadow: -3px 0 15px 3px rgba(0, 0, 0, 0.1);
		z-index: 10;
		display: flex;
		align-items: center;
	}
</style>